import { useEffect, useState } from 'react'
import { Button } from 'tdesign-react'
import { useTranslation } from 'react-i18next'
import './index.less'
import ChangeLanguage from '@/components/ChangeLanguage'

const Header = () => {

  const { t } = useTranslation(['bugManager'])

  const [showTitle, setShowTitle] = useState(true)

  useEffect(() => {
    // 设置默认主题
    switchTheme()
  }, [])

  /**
   * 切换主题
   */
  const switchTheme = () => {
    const theme = document.documentElement.getAttribute('theme-mode') || ''
    switch (theme) {
      case 'default':
        document.documentElement.setAttribute('theme-mode', 'green')
        break
      case 'green':
        document.documentElement.setAttribute('theme-mode', 'pink')
        break
      case 'pink':
        document.documentElement.setAttribute('theme-mode', 'red')
        break
      case 'red':
        document.documentElement.setAttribute('theme-mode', 'orange')
        break
      case 'orange':
        document.documentElement.setAttribute('theme-mode', 'purple')
        break
      case 'purple':
        document.documentElement.setAttribute('theme-mode', 'cyan')
        break
      case 'cyan':
        document.documentElement.setAttribute('theme-mode', 'default')
        break
      default:
        document.documentElement.setAttribute('theme-mode', 'default')
        break
    }
  }

  /**
   * 展开、收起标题
   */
  const collapseTitle = () => {
    setShowTitle(!showTitle)
  }

  return <div className={'bug-manager-header'}>
    <h1 className={`title ${showTitle ? 'show-title' : ''}`}><span className={'username'}>{t('home.titlePart1')}</span>{t('home.titlePart2')}</h1>
    <div className={'toolbar'}>
      <Button className={'theme-switch'} onClick={switchTheme}>{t('home.changeTheme')}</Button>
      <Button className={'collapsed'} onClick={collapseTitle}>{showTitle ? t('home.collapseTitle') : t('home.expandedTitle')}</Button>
      <ChangeLanguage />
    </div>
  </div>
}

export default Header
